import React, { Component } from 'react'

class App extends Component {

  state = {
    title: '标题',
    num: 10
  }

  // add1() {
  //   this.setState({ num: this.state.num + 1 })
  //   console.log(this)
  // }

  add = () => {
    this.setState({ num: this.state.num + 1 })
  }

  // componentDidMount() {
  //   document.querySelector('button').addEventListener('click', this.add)
  // }

  render() {
    const { num, title } = this.state
    return (
      <div>
        <h2>{title}</h2>
        {/* 合成事件：
          1. React 自己实现了一套事件注册、分发的机制，统一了不同浏览器之间事件系统的差异。
          2. React 组件上声明的事件最终绑定到了 document 这个 DOM 节点上，
            而不是 React 组件对应的 DOM 节点。
            只有document这个节点上面才绑定了DOM原生事件，其他节点没有绑定事件。
            这样简化了DOM原生事件，减少了内存开销。
        */}
        {/* <button onClick={this.add1.bind(this)}>+</button> */}
        <button onClick={this.add}>+</button>

        <p ref={this.numRef}>num: {num}</p>
      </div>
    )
  }
}

export default App

// React.createElement('div', null, [
//   React.createElement('h2', null, '标题'),
//   React.createElement('button', { onClick: this.add }, '+'),
//   React.createElement('p', null, 'num:'+ num)
// ])
// 事件池储存所有事件
// onClick: {
//   button: this.add,
//   h1: fn1
//   p: hn2
// }
// const currentFn = onClick[button]
// currentFn()






// const obj = {
//   name: '小明',
//   say1() {
//     console.log(this.name)
//   },
//   say2: function() {
//     console.log(this.name)
//   },
//   say3: () => {
//     console.log(this.name)
//   }
// }
// // obj.say1()
// // obj.say2()
// obj.say3()

